<%--
  Created by IntelliJ IDEA.
  User: 13689
  Date: 2024/12/4
  Time: 下午12:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <title>购物车页面</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            height: 100vh;
            /* 占满整个页面高度 */
        }

        .cart {
            width: 60%;
            /* 占据整体页面的60% */
        }

        .module {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
            /* 模块之间的间距 */
        }

        .logo {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding: 10px 0;
            /* 调整这里的上下内边距 */
        }

        .logo-text {
            font-size: 20px;
            /* 调整字体大小 */
            font-weight: bold;
        }

        .logo img {
            width: 70px;
            margin-right: 10px;
            /* Logo 和文字之间的间距 */
        }

        .cart-item {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #dee2e6;
            padding: 10px;
            flex-wrap: nowrap;
            /* 防止换行 */
        }

        .cart-item:last-child {
            border-bottom: none;
        }

        .item-select {
            margin-right: 15px;
            cursor: pointer;
        }

        .item-info {
            display: flex;
            align-items: center;
            flex-grow: 1;
        }

        .item-image img {
            width: 100px;
            height: 100px;
            border-radius: 5px;
            margin-right: 15px;
        }

        .item-details {
            flex-grow: 1;
            display: flex;
            /* 将信息放在同一行 */
            align-items: center;
            /* 垂直居中对齐 */
            justify-content: space-between;
            /* 分散对齐 */
        }

        .item-price {
            font-size: 16px;
            color: #28a745;
            font-weight: bold;
            margin-right: 10px;
            /* 添加间距 */
        }

        .item-original-price {
            text-decoration: line-through;
            color: #868e96;
            margin-right: 10px;
            /* 添加间距 */
        }

        .item-quantity {
            display: flex;
            align-items: center;
            margin-right: 15px;
        }

        button {
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 5px 10px;
            transition: background-color 0.3s, transform 0.3s;
            /* 添加平滑过渡 */
            margin: 0 5px;
        }

        button:hover {
            background-color: #0056b3;
            transform: scale(1.05);
            /* 鼠标经过时放大 */
        }

        .total-section {
            display: flex;
            justify-content: space-between;
            /* 左中右布局 */
            align-items: center;
            margin-top: 20px;
        }

        .total {
            font-size: 20px;
            font-weight: bold;
        }

        .address-section {
            margin-top: 20px;
            flex-grow: 1;
            /* 中间部分自动填满 */
            margin: 0 20px;
            /* 左右间距 */
        }

        .address-label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .address-input {
            width: 100%;
            /* 保持100%宽度 */
            max-width: 300px;
            /* 设置最大宽度 */
            padding: 5px;
            /* 减小内边距 */
            border: 1px solid #ced4da;
            border-radius: 5px;
        }

        .submit-button {
            background-color: #28a745;
            /* 提交按钮颜色 */
        }

        .submit-button:hover {
            background-color: #218838;
            /* 鼠标经过颜色 */
        }

        .select-all {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .select-all img {
            cursor: pointer;
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }
    </style>
    <script src="js/vue-2.6.10.js"></script>
    <script src="js/axios.min.js"></script>
</head>


<body>

<div id="app" class="cart">
    <!-- Logo 模块 -->
    <div class="module">
        <div class="logo">
            <img src="picture/bjImages/logo1.png" alt="购物车 Logo"> <!-- 替换为你的购物车 Logo -->
            <div class="logo-text">购物车</div>
        </div>
    </div>

    <!-- 商品模块 -->
    <div class="module">
        <div class="select-all">
            <input type="checkbox" :checked="allSelected" @change="toggleSelectAll">
            <span style="cursor: pointer;">全选</span>
        </div>
        <div v-for="item in products" :key="item.name" class="cart-item">
            <div class="item-select">
                <input type="checkbox" :checked="item.isChecked" @change="toggleSelection(item)">
            </div>
            <div class="item-info">
                <div class="item-image">
                    <img :src="imagesUrl(item.picture)" alt="商品图片">
                </div>
                <div class="item-details">
                    <div>{{ item.name }}</div>
                    <div class="item-price">{{ item.sell_price }}元</div>
                    <div class="item-quantity">
                        <button @click="changeQuantity(item.name, -1)">-</button>
                        {{ item.number }}
                        <button @click="changeQuantity(item.name, 1)">+</button>
                    </div>
                    <button @click="removeFromCart(item.name)">删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 结算模块 -->
    <div class="module total-section">
        <div class="total">总计：{{ total }}元</div>
        <div class="address-section">
            <label for="address" class="address-label">收货地址:</label>
            <input type="text" id="address" class="address-input" placeholder="请输入收货地址">
        </div>
        <button class="submit-button" @click="submitOrder()">提交订单</button>
    </div>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            products: [],
        },
        created() {
            axios.get('getCar.do').then(function (result) {
                // 确保每个商品有一个 isChecked 属性
                app.products = result.data.map(item => ({
                    ...item,
                    isChecked: false // 添加 isChecked 属性，默认为 false
                }));
            });
        },
        computed: {
            total() {
                return this.products.reduce((sum, item) => sum + (item.isChecked ? item.sell_price * item.number : 0), 0);
            },
            allSelected() {
                return this.products.every(item => item.isChecked);
            }
        },
        methods: {
            imagesUrl: function (img_name) {
                return './picture/productImages/' + img_name;
            },
            toggleSelectAll() {
                const newValue = !this.allSelected;
                this.products.forEach(item => {
                    item.isChecked = newValue;
                });
            },
            toggleSelection(item) {
                item.isChecked = !item.isChecked;
            },
            changeQuantity(name, delta) {
                const item = this.products.find(item => item.name === name);
                if (item) {
                    item.number += delta;
                    if (item.number <= 0) {
                        this.removeFromProducts(name);
                    }
                }
            },
            removeFromCart(name) {
                this.removeFromProducts(name);
            },
            removeFromProducts(name) {
                const index = this.products.findIndex(item => item.name === name);
                if (index !== -1) { // 确保商品存在
                    this.products.splice(index, 1);
                }
            },
            submitOrder: function () {
                let param = {
                    "total_price": this.total,
                    "shopping_cars": this.products
                }
                axios.post('submitOrder.do', param, { headers: { 'Content-Type': 'application/json' } })
                    .then(function (result) {
                        if (result.data.length > 0) {
                            window.location.href = "product_list.jsp";
                        } else {
                            window.location.href = "login.jsp";
                        }
                    });
            }
        }
    });
</script>

</body>


</html>
